<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        body, html {
            width: 100%;
            margin: 0;
        }

        #box {
            width: 100%;
            height: 328px;
            overflow: hidden;
        }

        #ul {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
        }

        li {
            width: 33.33%;
            list-style: none;
            position: absolute;

        }
        img {
            display: block;
            margin: 0 auto;
            width: 100%;
            transition: all 1s;
            transform : scale(0.6);
        }
        #two{
            transform : scale(1);
        }
        .opacity {
            -webkit-animation: opacity 1s;
        }

        @-webkit-keyframes opacity {
            0% {
            filter: alpha(opacity=100);
                -moz-opacity: 100;
                -khtml-opacity: 100;
                opacity: 1
            }
            10% {
                filter: alpha(opacity=10);
                -moz-opacity: 10;
                -khtml-opacity: 10;
                opacity: 0.1
            }
            90% {
                filter: alpha(opacity=10);
                -moz-opacity: 10;
                -khtml-opacity: 10;
                opacity: 0.1
            }
            100% {
                filter: alpha(opacity=100);
                -moz-opacity: 100;
                -khtml-opacity: 100;
                opacity: 1
            }
        }
    </style>
    <script src="jquery-1.12.0.js"></script>
</head>
<body>
<div id='box'>
    <ul id="ul">
        <li><img src="imgs/icon1-1.png" alt=""/></li>
        <li><img src="imgs/icon2-2.png" alt="" id="two"/></li>
        <li><img src="imgs/icon3-3.png" alt=""/></li>
    </ul>
</div>
<script>


    var startX = 0;
    var endX = 0;
    var ul = document.getElementById('ul')
    var ulWidth = ul.offsetWidth;
    var liarr = ul.getElementsByTagName('li');
    var liwid = liarr[0].offsetWidth;
    var imgarrr = ul.getElementsByTagName('img');
    var flag = true;
    var moveJl = [
        {left: liwid * 0},
        {left: liwid * 1},
        {left: liwid * 2}
    ]

    ul.addEventListener('touchstart', function (e) {
        startX = e.touches[0].clientX;
    });
    ul.addEventListener('touchend', function (e) {
        endX = e.changedTouches[0].clientX;
        if (endX - startX > 0 && Math.abs(endX - startX) > 1 / 5 * ulWidth) {
            if (flag) {
                flag = false;
                remov();
                scalemove(false)
                move(false);
            }

        } else if (endX - startX < 0 && Math.abs(endX - startX) > 1 / 5 * ulWidth) {
            if (flag) {
                flag = false;
                remov();
                scalemove(true)
                move(true);
            }
        }
    });


    for (var i = 0; i < liarr.length; i++) {
        $('#ul li').eq(i).css(moveJl[i])
    }
    function move(bool) {
        if (bool === true || bool === false) {
            if (bool) {
                moveJl.unshift(moveJl.pop())

            } else {
                moveJl.push(moveJl.shift());
            }
        }
        for (var i = 0; i < moveJl.length; i++) {
            $('#ul li').eq(i).animate(moveJl[i], 1000,function(){
                flag = true;
            })
        }
    }

    function scalemove(bool){
        if (bool === true || bool === false) {
            if (bool) {
                for(var i=0;i<liarr.length;i++){
                    if(liarr[i].offsetLeft===liwid*2){
                        scaleone(i);
                    }
                    if(liarr[i].offsetLeft===liwid){
                        scaletwo(i);
                    }
                    if(liarr[i].offsetLeft===0){
                        liarr[i].className='opacity'
                    }
                }
            } else {
                for(var i=0;i<liarr.length;i++){
                    if(liarr[i].offsetLeft===0){
                        scaleone(i);
                    }
                    if(liarr[i].offsetLeft===liwid){
                        scaletwo(i);
                    }
                    if(liarr[i].offsetLeft===liwid*2){
                        liarr[i].className='opacity'
                    }
                }
            }
        }
    }
    function scaleone(a) {
        imgarrr[a].style.transform = 'scale(' + 1 + ')';
    }
    function scaletwo(a) {
        imgarrr[a].style.transform = 'scale(' + 0.6 + ')';
    }
    function remov() {
        for (var i = 0; i < liarr.length; i++) {
            liarr[i].className = '';
        }
    }
</script>
</body>
</html>